<template>
  <div class="app">
    <v-header class="Header"></v-header>
    <div class="content">
      <!-- 路由出口 -->
      <router-view></router-view>
    </div>
    <v-footer class="footer"></v-footer>

  </div>
</template>

<script>
  import header from 'components/header/header.vue';
  import footer from 'components/footer/footer.vue';

  export default {
    components: {
      'v-header': header,
      'v-footer': footer
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .app
    display: flex
    flex-direction :column
    height: 100%
    .Header
      /* 我们希望 header 采用固定的高度，只占用必须的空间 */
      /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
      flex: 0 0 auto

    .content /* 将 flex-grow 设置为1，该元素会占用全部可使用空间
        而其他元素该属性值为0，因此不会得到多余的空间*/
      /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
      flex: 1 0 auto
      margin: 0
      padding: 0
    .footer
      /* 和 header 一样，footer 也采用固定高度*/
      /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
      flex: 0 0 auto
</style>
